{% extends "app/base_site.html" %}

{% block title %} 布控管理 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
<style>
    :root {
        --xc-primary: #165DFF;
        --xc-primary-light: #4080FF;
        --xc-primary-dark: #0E42D2;
        --xc-warning: #FF7D00;
        --xc-danger: #F53F3F;
        --xc-gray-100: #F2F3F5;
        --xc-gray-200: #E5E6EB;
        --xc-gray-300: #C9CDD4;
        --xc-gray-400: #86909C;
        --xc-gray-500: #4E5969;
        --xc-gray-600: #272E3B;
        --xc-gray-700: #1D2129;
        --xc-white: #FFFFFF;
        --xc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
        --xc-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        --xc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
        --xc-radius-sm: 4px;
        --xc-radius: 6px;
        --xc-radius-lg: 8px;
        --xc-radius-xl: 12px;
        --xc-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }


    .xc_container {
        color: #333;
        line-height: 1.6;
        margin: 0 auto;
        padding: 10px 20px;
    }

    /* 工具栏样式 */
    .xc_toolbar {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        align-items: center;
    }

    .xc_btn {
        padding: 4px 8px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;

        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .xc_btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--xc-shadow);
    }

    .xc_btn:active {
        transform: translateY(0);
    }
    .xc_btn_primary {
        background-color: var(--xc-primary);
        color: white;
    }

    .xc_btn_primary:hover {
        background-color: var(--xc-primary-dark);
    }

    .xc_btn_success {
        background-color: #2b542c;
        color: white;
    }

    .xc_btn_success:hover {
        background-color: #347335;
    }

    .xc_btn_danger {
        background-color: var(--xc-danger);
        color: white;
    }

    .xc_btn_danger:hover {
        background-color: #e03636;
    }

    .xc_btn_warning {
        background-color: var(--xc-warning);
        color: white;
    }

    .xc_btn_warning:hover {
        background-color: #e67200;
    }

    .xc_btn_default {
        background-color: var(--xc-white);
        color: var(--xc-gray-600);
        border: 1px solid var(--xc-gray-200);
    }

    .xc_btn_default:hover {
        background-color: var(--xc-gray-100);
    }

    .xc_search_box {
        display: flex;
        margin-left: auto;
        position: relative;
        width: 200px;
    }

    .xc_search_input {
        flex: 1;
        padding: 3px 16px 5px 40px;
        border: 1px solid var(--xc-gray-200);
        border-radius: var(--xc-radius);
        font-size: 14px;
        transition: var(--xc-transition);
        background-color: var(--xc-white);
    }

    .xc_search_input:focus {
        border-color: var(--xc-primary);
        outline: none;
        box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
    }

    .xc_search_icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--xc-gray-400);
    }

    /* 摄像头组样式 */
    .xc_camera_groups {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .xc_group {
        background-color: var(--xc-white);
        border-radius: var(--xc-radius-xl);
        overflow: hidden;
        box-shadow: var(--xc-shadow-sm);
        transition: var(--xc-transition);
    }

    .xc_group:hover {
        box-shadow: var(--xc-shadow);
    }
    .xc_group_header {
        padding: 2px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .xc_group_header::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);

    }
    .xc_group_title {
        color: #000000;
        padding: 2px 8px;
        display: flex;
        font-size: 18px;
        font-weight: 600;
        align-items: center;
        gap: 12px;
    }
    .xc_group_title_a {
        color: #000000;
        text-decoration:none;
        cursor: pointer;
    }
    .xc_group_title_a:hover {
        color: var(--xc-primary);
        text-decoration:none;
    }

    .xc_group_count {
        border: 1px solid #000000;
        color: #000000;
        padding: 1px 7px;
        border-radius: 10px;
        font-size: 8px;
        cursor: pointer;
    }

    .xc_group_actions {
        display: flex;
        gap: 12px;
        align-items: center;
        cursor: pointer;
    }

    .xc_group_toggle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid green;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--xc-transition);
    }

    .xc_group_toggle.expanded {
        transform: rotate(180deg);
    }

    /* 摄像头列表样式 - 二级显示 */
    .xc_camera_list {
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
    }

    .xc_camera_list.expanded {
        padding: 4px;
        max-height: 800px;
        overflow: auto;
    }
    .xc_camera_table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .xc_camera_table th {
        padding: 6px 12px;
        text-align: left;
        font-weight: 500;
        color: var(--xc-gray-500);
        font-size: 14px;
        border-bottom: 1px solid var(--xc-gray-200);
        position: relative;
    }

    .xc_camera_table th::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 16px;
        right: 16px;
        height: 1px;
        background-color: var(--xc-gray-200);
    }

    .xc_camera_table td {
        padding: 3px 4px;
        font-size: 14px;
        color: var(--xc-gray-600);
        border-bottom: 1px solid var(--xc-gray-100);
        transition: background-color 0.2s;
    }

    .xc_camera_table tr:last-child td {
        border-bottom: none;
    }

    .xc_camera_table tbody tr:hover {
        background-color: rgba(22, 93, 255, 0.03);
    }

    /* 状态标签样式 */
    .xc_status {
        padding: 4px 6px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .xc_status_running {
        background-color: rgba(0, 180, 42, 0.1);
        color: #2b542c;
    }

    .xc_status_stopped {
        background-color: rgba(245, 63, 63, 0.1);
        color: var(--xc-danger);
    }

    .xc_status_pending {
        background-color: rgba(255, 125, 0, 0.1);
        color: var(--xc-warning);
    }

    .xc_status_dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: currentColor;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }

    /* 操作按钮样式 */
    .xc_action_buttons {
        display: flex;
        gap: 8px;
    }

    .xc_action_btn {
        width: 28px;
        height: 30px;
        border-radius: 4px;
        background-color: var(--xc-gray-100);
        border: none;
        color: var(--xc-gray-500);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--xc-transition);
    }

    .xc_action_btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .xc_action_btn.view:hover {
        background-color: var(--xc-primary);
        color: white;
        cursor: pointer;
    }

    .xc_action_btn.start:hover {
        background-color: #2b542c;
        color: white;
    }

    .xc_action_btn.stop:hover {
        background-color: var(--xc-warning);
        color: white;
    }

    .xc_action_btn.delete:hover {
        background-color: var(--xc-danger);
        color: white;
    }


    /* SVG图标样式 */
    .xc-icon {
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .xc-icon-sm {
        width: 16px;
        height: 16px;
    }

    .xc-icon-lg {
        width: 24px;
        height: 24px;
    }

    /* 响应式调整 */
    @media (max-width: 1024px) {
        .xc_search_box {
            width: 260px;
        }
    }

    @media (max-width: 768px) {
        .xc_toolbar {
            justify-content: flex-start;
        }

        .xc_search_box {
            margin-left: 0;
            width: 100%;
            order: 100;
            margin-top: 12px;
        }

        .xc_group_header {
            padding: 12px 16px;
        }

        .xc_camera_list.expanded {
            padding: 12px;
        }

        .xc_camera_table td {
            padding: 12px 8px;
        }

        .xc_action_buttons {
            gap: 4px;
        }

        .xc_action_btn {
            width: 28px;
            height: 28px;
        }
    }

    .xc_pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .xc_pagination>.xc_page-btn {
        min-width: 36px;
        height: 36px;
        border-radius: 6px;
        border: 1px solid #ddd;
        background-color: white;
        color: #555;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .xc_pagination>.xc_page-btn:hover:not(.xc_active) {
        border-color: #34495e;
        color: #34495e;
    }
    .xc_pagination>.xc_page-btn.xc_active {
        background-color: #34495e;
        color: white;

    }
    .xc_pagination>.xc_page-info {
        font-size: 14px;
        color: #7f8c8d;
    }
    .xc_select {
        width: 180px;
        border-radius: 6px;
        font-size: 14px;
        color: #333; /* 文本颜色为深灰色，以便在白色背景上清晰可见 */
        cursor: pointer;
    }
    .xc_select:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
    }
</style>
{% endblock stylesheets %}

{% block content %}

  <div class="right_col" role="main">
    <div class="">
      <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel">
   <!-- xc page start -->
    <div class="xc_container">
        <div class="xc_toolbar">
            <h2>布控管理
             <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
            </h2>
            <div>
                  <select id="select_node" class="input-sm xc_select">
                         <option value="0">请选择节点</option>
                         {% for node in nodes %}
                             <option {% if node.code == node_code %}selected{% endif %} value="{{ node.code }}">{{ node.nickname }}</option>
                        {% endfor %}
                    </select>
            </div>

            <button class="xc_btn xc_btn_default" onclick="f_openHandleAllControl('add')">
                <svg class="xc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polygon points="5 3 19 12 5 21 5 3"/>
                </svg>
                全部执行
            </button>
            <button class="xc_btn xc_btn_default" onclick="f_openHandleAllControl('cancel')">
                <svg class="xc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="6" y="4" width="4" height="16"/>
                    <rect x="14" y="4" width="4" height="16"/>
                </svg>
                全部取消
            </button>
            <button class="xc_btn xc_btn_default" onclick="f_openHandleAllControl('delete')">
                <svg class="xc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="3 6 5 6 21 6"/>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                </svg>
                全部删除
            </button>

             <button class="xc_btn xc_btn_default" onclick="f_add()">
                <i class="fa fa-plus"></i> 添加布控
            </button>

             <span id="control_info"></span>
             <span id="top_msg">{{top_msg}}</span>

            <div class="xc_search_box">
                <svg class="xc_search_icon xc-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <input type="text" class="xc_search_input" id="search_input" placeholder="请输入视频流名称">
            </div>
        </div>

        <div class="xc_camera_groups"  id="data">
            <!-- item start -->

            <!-- item end -->
        </div>
    </div>
   <!-- xc page end -->
              </div>
        </div>
      </div>

    <div class="row">
        <div class="xc_pagination" id="pageData">
        </div>
    </div>

      <!--日志弹窗start -->
      <div id="control_log_dialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title" >布控日志</h4>
              </div>
              <div class="modal-body">
                <div style="padding: 5px 20px;">
                  <table class="table table-striped">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>日志内容</th>
                        <th>时间</th>
                      </tr>
                    </thead>
                    <tbody id="control_log_data">
                    <!--
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>@mdo</td>
                      </tr>
                    -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
       </div>
      <!--日志弹窗end -->

       <!--复制弹窗start -->
      <div id="copy_dialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title" >复制布控</h4>
              </div>

              <div class="modal-body">
                <div style="padding: 5px 20px;">
                  <form class="form-horizontal calender" role="form">
                    <div class="form-group">
                          <label class="col-sm-3 control-label">布控编号</label>
                          <div class="col-sm-9">
                            <input type="text" readonly class="form-control" id="copy_code_input"/>
                          </div>
                    </div>

                   <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12">视频流</label>
                        <div class="col-md-9 col-sm-9 col-xs-12">
                        <select id="copy_streams_select" style="height: 200px;"  class="select2_multiple form-control" required="required"  multiple="multiple" >
                            <option value="0">---请选择视频流(可多选)---</option>
                        </select>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">备注</label>
                      <div class="col-sm-9">
                        <textarea class="form-control" style="height:40px;" id="copy_remark_textarea"></textarea>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="f_openCopy()" class="btn btn-default">提交</button>
              </div>
            </div>
          </div>
       </div>
      <!--复制弹窗end -->

      <!--快捷设置弹窗start -->
      <div id="settings_dialog" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                  <h4 class="modal-title" >快捷设置</h4>
              </div>

              <div class="modal-body">
                <div style="padding: 5px 20px;">
                  <form class="form-horizontal calender" role="form">
                   <div class="form-group">
                          <label class="col-sm-3 control-label">布控编号</label>
                          <div class="col-sm-9">
                            <input type="text" readonly class="form-control" id="settings_code_input"/>
                          </div>
                    </div>

                   <div class="form-group">
                      <label class="col-sm-3 control-label">报警间隔</label>
                      <div class="col-sm-9">
                        <input type="number" class="form-control" id="min_interval_input"/>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">OSD参数</label>
                      <div class="col-sm-9">
                        <textarea class="form-control" style="height:40px;" id="osd_params_textarea"></textarea>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">扩展参数</label>
                      <div class="col-sm-9">
                        <textarea class="form-control" style="height:60px;" id="extend_params_textarea"></textarea>
                      </div>
                    </div>

                    <div class="form-group">
                      <label class="col-sm-3 control-label">修改范围</label>
                      <div class="col-sm-9">
                          <select id="modify_range_select"  class="form-control">
                            <option value="0">当前布控</option>
                            <option value="1">相同视频所有布控</option>
                            <option value="2">相同算法所有布控</option>
                            <option value="3">所有布控</option>
                        </select>
                      </div>
                    </div>

                  </form>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="f_openSettings()" class="btn btn-default">提交</button>
              </div>
            </div>
          </div>
       </div>
      <!--快捷设置弹窗end -->

    </div>
  </div>

{% endblock content %}

{% block javascripts %}
  {{ block.super }}

<script>
    let eleTopLoading = $("#top_loading");
    let eleTopMsg= $("#top_msg");
    let eleData = $("#data");
    let elePageData = $("#pageData");
    let eleControlInfo= $("#control_info");
    let eleSearchInput= $("#search_input");//v4.638新增
    //布控日志弹窗
    let eleControlLogDialog = $("#control_log_dialog");
    let eleControlLogData = $("#control_log_data");
    //复制布控弹窗
    let eleCopyDialog = $("#copy_dialog");
    let eleCopyCodeInput = $("#copy_code_input");
    let eleCopyStreamsSelect= $("#copy_streams_select");
    let eleCopyRemarkTextarea= $("#copy_remark_textarea");
    //快捷设置弹窗
    let eleSettingsDialog = $("#settings_dialog");
    let eleSettingsCodeInput = $("#settings_code_input");
    let eleMinIntervalInput = $("#min_interval_input");
    let eleOsdParamsTextarea = $("#osd_params_textarea");
    let eleExtendParamsTextarea = $("#extend_params_textarea");
    let eleModifyRangeSelect = $("#modify_range_select");
    //临时辅助参数
    let curPage = 1;//当前页面
    let curPageSize = 10;

    let eleSelectNode = $("#select_node");
    let mNodeCode = "{{node_code}}";

    eleSelectNode.change(function () {
        let val = $(this).val();
        if(val === "0"){
              myAlert("请选择节点！","error");
        }else{
            mNodeCode = val;
            curPage = 1;
            f_openIndex(curPage,curPageSize);
        }

    });

    function toggleGroup(actionsElement) {
        const headerElement = actionsElement.parentNode;
        const listElement = headerElement.nextElementSibling;
        const toggleIcon = headerElement.querySelector('.xc_group_toggle');

        listElement.classList.toggle('expanded');
        toggleIcon.classList.toggle('expanded');
    }
    function f_add() {
        let url = "/control/add?node_code="+mNodeCode;
        window.location.href = url;
    }
    function f_edit(controlCode) {
        let url = "/control/edit?code="+controlCode+"&node_code="+mNodeCode;
        window.location.href = url;
    }
    function f_openDel(controlCode) {
        let ret = confirm("确认删除吗？");
        if (ret){
            eleTopLoading.show();
            $.ajax({
                   url: '/control/openDel',
                   type: "post",
                   async: true,
                   data: {"code":controlCode,"node_code":mNodeCode},
                   dataType: "json",
                   timeout: 0,
                   error: function () {
                       eleTopLoading.hide();
                       myAlert("网络异常，请确定网络正常！","error");
                   },
                   success: function (res) {
                          eleTopLoading.hide();
                       if(1000 === res.code){
                           f_openIndex(curPage,curPageSize);
                       }else{
                            myAlert(res.msg,"error");
                       }
                   }
                });
        }
    }
    function f_openLog(controlCode) {
        eleTopLoading.show();
        $.ajax({
               url: '/control/openLog',
               type: "get",
               async: true,
               data: {"controlCode":controlCode,"node_code":mNodeCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   eleTopLoading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   eleTopLoading.hide();
                   if(1000 === res.code){
                        // BootStrap弹窗说明：https://www.genban.org/teach/teach-28585.html
                        eleControlLogDialog.modal("toggle");
                        //eleControlLogDialog.modal("show");
                        //eleControlLogDialog.modal("hide");
                        eleControlLogData.html("");
                       let item_html;
                       let data = res.data;
                       let data_length = data.length;

                       if(0===data_length){
                           item_html = "";
                          item_html += "<tr>";
                          item_html += "<td colspan='3'>暂无日志</td>";
                          item_html += "</tr>";
                          eleControlLogData.append(item_html);
                       }else{
                           for (let i = 0; i < data_length; i++) {
                               let d = data[i];
                               item_html = "";
                               item_html+="<tr>";
                                item_html+="<th scope=\"row\">"+d["id"]+"</th>";
                                item_html+="<td style='max-width: 200px;'>"+d["content"]+"</td>";
                                item_html+="<td>"+d["create_time_str"]+"</td>";
                                item_html+="</tr>";
                                eleControlLogData.append(item_html);
                           }
                       }
                   }else{
                        myAlert(res.msg,"error");
                   }

                }
            });
    }
    function f_copy(controlCode) {
        eleTopLoading.show();
        $.ajax({
               url: '/open/getAllStreamData',
               type: "get",
               async: true,
               data: {"node_code":mNodeCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   eleTopLoading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   eleTopLoading.hide();
                   if(1000 === res.code){
                       let data = res.data;
                       let html = "<option value=\"0\">---请选择视频流(可多选)---</option>";
                       for (let i = 0; i < data.length; i++) {
                           let d = data[i];
                           let d_code = d["code"];
                           let d_nickname = d["nickname"];
                           html += "<option value=\""+d_code+"\">"+d_nickname+"</option>";
                       }
                       eleCopyDialog.modal("toggle");
                       eleCopyCodeInput.val(controlCode)
                       eleCopyRemarkTextarea.val("copy from "+controlCode)
                       eleCopyStreamsSelect.html(html);
                   }else{
                       myAlert(res.msg,"error");
                   }
                }
            });

    }
    function f_openCopy() {
        let val = eleCopyStreamsSelect.val();//typeof object, array
        if(val===null){
            myAlert("请至少选择1个摄像头","error");
            return false;
        }else{
            let vals = [];
            for (let i = 0; i < val.length; i++) {
                if("0"!==val[i]){
                    vals.push(val[i]);
                }
            }
            if(vals.length > 0){
                eleCopyDialog.modal("toggle");

                let controlCode = eleCopyCodeInput.val()
                let stream_codes = vals.join(",");
                let remark = eleCopyRemarkTextarea.val();
                eleTopLoading.show();
                $.ajax({
                       url: '/control/openCopy',
                       type: "post",
                       async: true,
                       data: {"controlCode":controlCode,"streamCodes":stream_codes,"remark":remark,"node_code":mNodeCode},
                       dataType: "json",
                       timeout: 0,
                       error: function () {
                           eleTopLoading.hide();
                           myAlert("网络异常，请确定网络正常！","error");
                       },
                       success: function (res) {
                           eleTopLoading.hide();
                           if(1000 === res.code){
                               f_openIndex(curPage,curPageSize);
                           }else{
                                myAlert(res.msg,"error");
                           }
                       }
                    });
            }else{
                myAlert("请至少选择1个摄像头","error");
                return false;
            }
        }
    }
    function f_settings(controlCode) {
        eleTopLoading.show();
        $.ajax({
               url: '/open/getControl',
               type: "get",
               async: true,
               data: {"code":controlCode,"node_code":mNodeCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   eleTopLoading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   eleTopLoading.hide();
                   if(1000 === res.code){
                       let min_interval = res.info["min_interval"];
                       let osd_params = res.info["osd_params"];
                       let extend_params = res.info["extend_params"];

                        eleSettingsDialog.modal("toggle");
                        eleSettingsCodeInput.val(controlCode)
                        eleMinIntervalInput.val(min_interval)
                        eleOsdParamsTextarea.val(osd_params)
                        eleExtendParamsTextarea.val(extend_params)
                        eleModifyRangeSelect.find('option[value="0"]').prop('selected', true);

                   }else{
                        myAlert(res.msg,"error");
                   }
                }
            });
    }
    function f_openSettings() {
        eleSettingsDialog.modal("toggle");
        let controlCode = eleSettingsCodeInput.val();
        let min_interval = eleMinIntervalInput.val();
        let osd_params = eleOsdParamsTextarea.val();
        let extend_params = eleExtendParamsTextarea.val();
        let modify_range = eleModifyRangeSelect.val()

        eleTopLoading.show();
        $.ajax({
           url: '/control/openSettings',
           type: "post",
           async: true,
           data: {
               "code":controlCode,
               "min_interval":min_interval,
               "osd_params":osd_params,
               "extend_params":extend_params,
               "modify_range":modify_range,
               "node_code":mNodeCode
           },
           dataType: "json",
           timeout: 0,
           error: function () {
               eleTopLoading.hide();
               myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               eleTopLoading.hide();
               if(1000 === res.code){
                    //成功
               }else{
                    myAlert(res.msg,"error");
               }
           }
        });


    }
    function f_open_player(stream_app,stream_name){
        window.open("/stream/player?app="+stream_app+"&name="+stream_name+"&node_code="+mNodeCode);
    }
    function f_open_flow(code) {
        let url = "/algorithmFlow/edit?code="+code;
        window.open(url);
    }
    function f_show_pageData(pageData) {
        let page_size = pageData["page_size"];
        let html = "";
        html+="<div class=\"xc_page-info\">共"+pageData["page_num"]+"页 / "+pageData["count"]+"条</div>";
        let pageLabels = pageData["pageLabels"];

        for (let i = 0; i < pageLabels.length; i++) {
            let cur = pageLabels[i]["cur"];
            //console.log("f_show_pageData",typeof cur,cur)
            if(cur === 1){
                html+="<div class=\"xc_page-btn xc_active\">"+pageLabels[i]["name"]+"</div>";
            }else{
                html+="<div class=\"xc_page-btn\" onclick=\"f_openIndex("+pageLabels[i]["page"]+","+page_size+")\" >"+pageLabels[i]["name"]+"</div>";
            }
        }
        elePageData.html(html);
    }
    function f_openIndex(page,page_size) {
        curPage = page;
        curPageSize = page_size;
        let search_text = eleSearchInput.val().trim();
        eleTopLoading.show();
        $.ajax({
               url: '/control/openIndex',
               type: "get",
               async: true,
               data: {"p":page,"ps":page_size,"search_text":search_text,"node_code":mNodeCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   eleTopLoading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   eleTopLoading.hide();
                   if(res.code === 1000)
                   {
                       let data = res.data;

                       if(data.length === 0){
                            eleData.html("<div>暂无数据</div>");
                            f_show_pageData(res.pageData)
                       }else{
                            eleData.html("");
                            for (let k = 0; k < data.length ; k++) {
                                let dd = data[k];
                                let dd_length = dd.length;
                                let d0 = dd[0];

                                let title;
                                if(d0["stream_active"] === 1){
                                    title= "<span class='sun-state-success' style='cursor: pointer;' onclick=\"f_open_player('"+d0["stream_app"]+"','"+d0["stream_name"]+"')\" ><i class=\"fa fa-play\"></i>播放</span><a class='xc_group_title_a' href=\"javascript:f_search('"+d0["stream_nickname"]+"')\" >"+d0["stream_nickname"]+"</a>";
                                }else{
                                    title= "<span class='sun-state-error'>离线</span> <a class='xc_group_title_a' href=\"javascript:f_search('"+d0["stream_nickname"]+"')\" >"+d0["stream_nickname"]+"</a>";
                                }
                                let item_html = "<div class=\"xc_group\">";
                item_html+="<div class=\"xc_group_header\">";
                    item_html+="<div class=\"xc_group_title\">"+title+"<span class=\"xc_group_count\">"+dd_length.toString()+"</span></div>";
                    item_html+="<div class=\"xc_group_actions\" onclick=\"toggleGroup(this)\">";
                        item_html+="<div class=\"xc_group_toggle\">";
                            item_html+="<svg class=\"xc-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"6 9 12 15 18 9\"/></svg>";
                        item_html+="</div>";
                    item_html+="</div>";
                item_html+="</div>";
                item_html+="<div class=\"xc_camera_list expanded\">";
                    item_html+="<table class=\"xc_camera_table\">";
                        item_html+="<thead>";
                            item_html+="<tr>";
                                item_html+="<th>ID</th>";
                                item_html+="<th>编号</th>";
                                item_html+="<th>算法流</th>";
                                item_html+="<th>算法</th>";
                                item_html+="<th>计算频率</th>";
                                item_html+="<th>状态</th>";
                                item_html+="<th>时间</th>";
                                item_html+="<th>操作</th>";
                            item_html+="</tr>";
                        item_html+="</thead>";
                        item_html+="<tbody>";
                               for (let i = 0; i < dd_length; i++) {
                                    let d = dd[i];
                                   item_html+="<tr>";
                                item_html+="<td>"+d["id"]+"</td>";
                                item_html+="<td style='width:15%;'>"+d["code"]+"</td>";
                                item_html+="<td><a class='sun-a-label' style='font-size: 12px;' href=\"javascript:f_open_player('"+d["push_stream_app"]+"','"+d["push_stream_name"]+"')\" ><i class=\"fa fa-play\"></i> 算法流</a></td>";
                                item_html+="<td style='width:20%;'>";
                                   if(d["flow_nickname"] === 0){//业务算法已被删除
                                        item_html += "<span class='sun-state-error'>已删除</span>";
                                    }else{
                                        //显示业务算法
                                        let flow_mode = d["flow_mode"];
                                        let flow_deploy_process_index = d["flow_deploy_process_index"];
                                        let flow_max_concurrency = d["flow_max_concurrency"];
                                        let flow_concurrency_unit_length = d["flow_concurrency_unit_length"];
                                        let base = flow_deploy_process_index+"/"+flow_max_concurrency+"/"+flow_concurrency_unit_length;

                                        item_html += "<a class='sun-a-label' href=\"javascript:f_open_flow('"+d["flow_code"]+"')\" >("+base+") "+d["flow_nickname"]+"</a>";
                                    }
                                item_html += "</td>";
                                item_html+="<td>"+d["checkFps"]+"</td>";

                                item_html += "<td class='cur_state_" + d["code"] + "'>";
                                   if(d["cur_state"] === 0){
                                       item_html += "<span class='sun-state-error'>未布控</span>";
                                   }else if(d["cur_state"] === 1){
                                        item_html += "<span class='sun-state-success'>布控中</span>";
                                   }else if(d["cur_state"] === 5){
                                        item_html += "<span class='sun-state-error'>布控中断</span>";
                                   }else{
                                        item_html += "<span class='sun-state-error'>未知状态</span>";
                                   }
                                  item_html += "</td>";

                                  item_html += "<td>"+d["last_update_time"]+"</td>";

                                item_html+="<td class=\"xc_action_buttons\">";
                                    if(1===d["cur_state"]) {//布控中
                                        item_html += "<button data-code='" + d["code"] + "'  data-handle='cancel' onclick=\"f_openHandleControl(this)\" class=\"btn btn-dark btn-sm\">取消布控</button>";
                                    }else{
                                        item_html += "<button data-code='" + d["code"] + "'  data-handle='add' onclick=\"f_openHandleControl(this)\" class=\"btn btn-default btn-sm\">执行布控</button>";
                                    }

                                    item_html+="<button class=\"xc_action_btn view\" onclick=\"f_edit('"+d["code"]+"')\" title=\"编辑\"><i class=\"fa fa-edit\"></i></button>";
                                    item_html+="<button class=\"xc_action_btn view\" onclick=\"f_settings('"+d["code"]+"')\" title=\"快捷设置\"><i class=\"fa fa-gear\"></i></button>";
                                    item_html+="<button class=\"xc_action_btn view\" onclick=\"f_copy('"+d["code"]+"')\"  title=\"复制\"><i class=\"fa fa-copy\"></i></button>";
                                    item_html+="<button class=\"xc_action_btn view\" onclick=\"f_openLog('"+d["code"]+"')\"  title=\"日志\"><i class=\"fa fa-chain\"></i></button>";
                                    item_html+="<button class=\"xc_action_btn delete\" onclick=\"f_openDel('"+d["code"]+"')\"  title=\"删除\">";
                                        item_html+="<svg class=\"xc-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"> <polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/></svg>";
                                    item_html+="</button>";

                                item_html+="</td>";
                            item_html+="</tr>";
                               }
                        item_html+="</tbody>";
                    item_html+="</table>";
                item_html+="</div>";
            item_html+="</div>";

                                eleData.append(item_html);
                           }
                            f_show_pageData(res.pageData)
                       }

                   }
                   else
                   {
                       eleData.html("<div>"+res.msg+"</div>");
                       myAlert(res.msg,"error");
                   }
               }
            });
    }

    function f_getAllCoreProcessData2() {
        eleControlInfo.html("<code>...</code>");
        $.ajax({
               url: '/open/getAllCoreProcessData2',
               type: "get",
               async: true,
               data: {"node_code":mNodeCode},
               dataType: "json",
               timeout: 0,
               error: function () {
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   if(1000 === res.code) {
                       let info = res.info
                       let __controlCount = info["controlCount"]
                       let __streamCount = info["streamCount"]
                       let html = "<code>视频数量:"+__streamCount+"</code> <code>布控数量:"+__controlCount+"</code>";
                       eleControlInfo.html(html);
                   }else{
                       let msg = res.msg;
                       let html = "<code>"+msg+"</code>";
                       eleControlInfo.html(html);
                   }
               }
            });
    }
    function f_openHandleAllControl(handle) {
        //执行全部布控 或 取消全部布控
        let msg = "";
        if(handle === "add"){
            msg = "确认全部执行吗？";
        }else if(handle === "cancel"){
            msg = "确认全部取消吗？";
        }else if(handle === "delete"){
            msg = "确认全部删除吗？";
        }else{
            return;
        }
        let ret = confirm(msg);
        if (ret) {
            eleTopLoading.show();
            $.ajax({
                   url: '/control/openHandleAllControl',
                   type: "post",
                   async: true,
                   data: {"handle":handle, "state":10,"node_code":mNodeCode},
                   dataType: "json",
                   timeout: 0,
                   error: function () {
                       eleTopLoading.hide();
                       myAlert("网络异常，请确定网络正常！","error");
                   },
                   success: function (res) {
                        eleTopLoading.hide();
                        f_getAllCoreProcessData2();

                        if(1000 === res.code){
                            myAlert(res.msg,"success",1000);
                            setTimeout(function () {
                                f_openIndex(curPage,curPageSize);
                            }, 1000);
                       }else{
                            myAlert(res.msg,"error");
                       }
                   }
                });
        }

    }
    function f_openHandleControl(obj) {
        //obj.getAttribute("data-handle"); // js 获取 data-handle属性
        //obj.setAttribute("data-handle","123") // js 修改 data-handle属性
        let jqueryObj = $(obj);
        let handle = jqueryObj.data("handle");
        //jqueryObj.data("handle","123");
        let code = jqueryObj.data("code");

        let url;
        if(handle === "add"){
            url = "/control/openStartControl";
        }else if(handle === "cancel"){
            url = "/control/openStopControl";
        }else{
            return;
        }
        eleTopLoading.show();
        $.ajax({
           url: url,
           type: "post",
           async: true,
           data: {"code":code,"node_code":mNodeCode},
           dataType: "json",
           timeout: 0,
           error: function () {
                eleTopLoading.hide();
                myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               eleTopLoading.hide();

               f_getAllCoreProcessData2();

               if(res.code === 1000){
                   myAlert(res.msg,"success",2000);

                   if(handle === "add"){
                       jqueryObj.removeClass("btn-default")
                       jqueryObj.addClass("btn-dark")
                       jqueryObj.data("handle","cancel");
                       jqueryObj.html("取消布控");

                        //布控成功
                       $(".cur_state_"+code).html("<span class='sun-state-success'>布控中</span>");
                       //$(".menu_"+code).hide();

                   }else if(handle === 'cancel'){
                       jqueryObj.removeClass("btn-dark")
                       jqueryObj.addClass("btn-default")
                       jqueryObj.data("handle","add");
                       jqueryObj.html("执行布控")
                       //取消布控成功
                       $(".cur_state_"+code).html("<span class='sun-state-error'>未布控</span>")
                       //$(".menu_"+code).show();
                   }
               }else{
                   myAlert(res.msg,"error");
               }
           }
        });
    }
    function f_reload() {
        f_openIndex(curPage,curPageSize);
    }
    function f_search(name) {
        eleSearchInput.val(name);
        curPage = 1;
        f_openIndex(curPage,curPageSize);

    }
    eleSearchInput.on("keydown",function(e){
        if (e.key === 'Enter' || e.keyCode === 13) {
            e.preventDefault(); // 阻止默认行为，例如表单提交
            curPage = 1;
            f_openIndex(curPage,curPageSize);
        }
    })
    window.onload = function (){
        f_openIndex(curPage,curPageSize);
        f_getAllCoreProcessData2();

    };


</script>
{% endblock javascripts %}

